<template>
    <div class="cropping_box">
        <div class="vue_cropper_box">
            <vueCropper
                ref="cropper_ref"
                :img="cropper_options.img"
                :info="true"
                :infoTrue="cropper_options.infoTrue"
                :auto-crop="cropper_options.autoCrop"
                :fixed-box="cropper_options.fixedBox"
                :fixedNumber="cropper_options.fixedNumber"
                :fixed="cropper_options.fixed"
                :centerBox="cropper_options.centerBox"
                @realTime="real_time">
            </vueCropper>
        </div>
        <div class="bottom_button">
            <el-button @click="cancel">取消</el-button>
            <el-button @click="resetting_click">重置</el-button>
            <el-button @click="finish_click"> 确认 </el-button>
        </div>
    </div>
</template>

<script setup>
import VueCropper from 'vue-cropper/src/vue-cropper.vue';
import { onMounted, reactive, ref } from 'vue';
import { upload_img } from '@/axios/home/index';
import { send_msg, listen_msg } from '@/utils/tag_msg.js';

const previews = ref(null);
const cropper_ref = ref(null);
const cropper_options = reactive({
    img: '', // 需要剪裁的图片
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: 150, // 默认生成截图框的宽度
    autoCropHeight: 150, // 默认生成截图框的长度
    fixedBox: false, // 是否固定截图框的大小 不允许改变
    info: true, // 裁剪框的大小信息
    outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
    outputType: 'jpeg', // 裁剪生成图片的格式
    canScale: false, // 图片是否允许滚轮缩放
    fixed: true, // 是否开启截图框宽高固定比例
    fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效
    full: true, // 是否输出原图比例的截图
    canMoveBox: false, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: true, // 截图框是否被限制在图片里面
    infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});
const file_val = ref(null);

onMounted(() => {
    // 监听主页面发送给我的消息
    listen_msg((data) => {
        if (data.type === 'send_file') {
            file_val.value = data.msg;
            cropper_options.img = file_val.value.value;
        }
    });
    // 当组件加载成功以后给主页面发送一个消息，告诉主页面头像裁剪页面已经加载完成可以像我发送照片信息
    send_msg({
        msg: '',
        type: 'load_success',
    });
});

// 重置按钮
const resetting_click = () => {
    cropper_ref.value.refresh();
};
// 上传图片（点击保存按钮）
const finish_click = () => {
    cropper_ref.value.getCropBlob(async (data) => {
        // 下面是将blob转为formData
        let form = new FormData();
        form.append('file', data, file_val.value.name);
        let res = await upload_img(form);
        if (res.code === 200) {
            // 获取到后端回传的头像路径后发送消息给主页面，告诉主页面后端回传的头像地址
            send_msg({
                msg: res.data.image_url,
                type: 'get_img_url',
            });
            cancel()
        }
    });
};

const cancel = () => {
    window.close();
};

// 裁剪之后的数据
const real_time = (data) => {
    previews.value = data;
};
</script>

<style scoped lang="less">
.cropping_box {
    width: 100vw;
    height: 100vh;
    .vue_cropper_box {
        width: 1000px;
        height: 770px;
        margin: auto;
    }
    .bottom_button {
        width: 1000px;
        height: 20px;
        margin: 10px auto 0;
        display: flex;
        justify-content: flex-end;
    }
}
</style>
